<template>
	<div id="app">
		<transition :name="transName"  @after-leave="onTransitionLeave" >
			<vue-page-stack>
				<router-view class="route-view"/>
			</vue-page-stack>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				transName: 'slide-left',
				isXwLoad: false
			}
		},
		created() {
			const _this = this;
			xwbridge.onXwLoadURL = function(location) {
				_this.isXwLoad = true;
				if (_this.$route.path !== location.path) {
					_this.$router.replace({
						path: location.path
					});
				}else{
					_this.$router.replace({
						path: '/empty/redirect',
						query:{
							redirect:location.path
						}
					});
				}
			}

		},
		methods: {
			onTransitionLeave() {
				// 恢复动画
				this.isXwLoad = false;
				this.transName = 'slide-left';
			}
		},
		watch: {
			$route(to, from) {
				if(this.isXwLoad){
					this.transName = 'immediate';
					return
				}
				if (to.params['stack-key-dir'] === 'forward') {
					// 当前是前进操作
					this.transName = 'slide-left';
					this.$router.isRouteBack = false;
				} else {
					// 当前是返回操作需要从左退出
					this.transName = 'slide-right';
					this.$router.isRouteBack = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		height: 100vh;
		width: 100%;
	}
	
	.route-view{
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}
	
	.immediate-leave,
	.immediate-leave-active,
	.immediate-leave-to
	{
		display: none;
	}
	
	
	.slide-left-leave,
	.slide-left-leave-active,
	.slide-left-leave-to,
	.slide-right-leave,
	.slide-right-leave-active,
	.slide-right-leave-to
	{
		position: absolute;
		top:0;
		left:0;
		z-index: 0;
	}
	
	.slide-left-leave-active,
	.slide-right-leave-active,
	.slide-right-enter-active,
	.slide-left-enter-active{
		transition: all 300ms ease;
		will-change: transform;
	}
	
	.slide-left-enter,
	.slide-right-leave-active {
		opacity: 1;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	
	.slide-right-enter,.slide-left-leave-active {
		opacity: 1;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	
	/* .slide-left-enter {
		opacity: 1;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	
	.slide-right-leave-active {
		opacity: 0.5;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
	}

	.slide-right-enter {
		opacity: 1;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	
	.slide-left-leave-active{
		opacity: 0.5;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	} */
</style>
